<template>
  <div class="main-wrapper">
    <div v-if="routeName !== 'Login'">
      <left-menu class="left-menu" />
      <div class="main-container">
        <router-view />
      </div>
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import { LeftMenu } from 'components'

export default {
  name: 'app',
  components: {
    LeftMenu,
  },
  data() {
    return {
      routeName: this.$route.name,
    }
  },
  watch: {
    $route(val) {
      this.routeName = val.name
    },
  },
  computed: {
    winH() {
      return `${window.winH}px`
    },
  },
}
</script>

<style>
.main-container {
  /*margin-left: 240px;*/
  position: absolute;
  left: 240px;
  top: 0;
  right: 0;
  padding: 20px 40px 120px;
  /*overflow: auto;*/
}

.left-menu {
  position: fixed;
  overflow: auto;
  min-width: 240px;
  top: 0;
  bottom: 0;
  /*height: 100%;*/
}

</style>
